<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"               
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns="http://www.w3.org/1999/xhtml">


    <f:view >
        <p:accordionPanel dynamic="true" cache="false">

            <p:tab title="Current events" >

                <h:form id="currentEvents"  >
                    <p:growl showDetail="true" />
                    <p:fieldset>
                        <p:dataGrid var="event" value="#{eventControl.currentEventList}" columns="1" emptyMessage="No current Event."  rows="12" paginator="true"   paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                    rowsPerPageTemplate="9,12,15">  
                            <p:column>

                                <h:panelGrid columns="1" style="width: 98%">

                                    <h:outputLabel class="bold color_blue" value="#{event.title}"></h:outputLabel>

                                    <p:separator style=" color: #ff6400" ></p:separator>
                                </h:panelGrid>
                                <h:panelGrid columns="2" style="width: 100%" >  


                                    <h:commandLink actionListener="#{eventControl.redirectToEvent(eventControl.selectedevent)}"  ><img src="#{event.photo}" height="100" width="70" />

                                        <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                    </h:commandLink>
                                    <h:panelGrid columns="1" width="100%">
                                        <h:panelGrid  columns="4" title="#{event.title}" >

                                            <h:outputLabel value="Start at:" class="color_blue"></h:outputLabel>
                                            <h:outputLabel value="#{event.startDate}"  class="bold"  >
                                                <f:convertDateTime timeZone="GMT+7" type="date" pattern="MM/dd/yyyy" />
                                            </h:outputLabel>
                                            <h:outputLabel value="End at:" class="color_blue" ></h:outputLabel>
                                            <h:outputLabel value="#{event.endDate}" >
                                                <f:convertDateTime timeZone="GMT+7" pattern="MM/dd/yyyy"  />
                                            </h:outputLabel>
                                            <h:outputLabel value="Register at:" class="color_blue_red"></h:outputLabel>
                                            <h:outputLabel value="#{event.startRegDate}"  class="bold"  >
                                                <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                            </h:outputLabel>
                                            <h:outputLabel value="Due to:" class="color_blue_red"></h:outputLabel>
                                            <h:outputLabel value="#{event.endRegDate}"  class="bold"  >
                                                <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                            </h:outputLabel>
                                        </h:panelGrid>
                                        <h:panelGrid columns="1" style="width: 100%;">
                                            <h:outputLabel value="#{eventControl.mediumEventDescription(event)}"  ></h:outputLabel>

                                            <p:commandLink   actionListener="#{eventControl.redirectToEvent(eventControl.selectedevent)}"  value="Details" style=" font-weight: bold; text-decoration: none; float: right;padding-right: 0px; color:#b1f100 ; background-color:#2e16b1" >
                                                <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                            </p:commandLink>
                                        </h:panelGrid>
                                    </h:panelGrid>
                                </h:panelGrid>  
                            </p:column>
                        </p:dataGrid>
                    </p:fieldset>


                </h:form>

            </p:tab>
            <p:tab title="Past events" >
                <h:form>
                    <p:dataGrid var="event" value="#{eventControl.pastEvents()}" columns="1"  emptyMessage="No past Event."  rows="12" paginator="true"   paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                rowsPerPageTemplate="9,12,15">  
                        <p:column>
                            <h:panelGrid columns="1" style="width: 98%" >

                                <h:outputLabel class="bold color_blue" value="#{event.title}"></h:outputLabel>

                                <p:separator style=" color: #ff6400" ></p:separator>
                            </h:panelGrid>
                            <h:panelGrid columns="2" style="width: 100%" >  

                                <h:commandLink actionListener="#{eventControl.redirectToEvent(eventControl.selectedevent)}"  ><img src="#{event.photo}" height="100" width="70" />

                                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                </h:commandLink>
                                <h:panelGrid columns="1" width="100%">
                                    <h:panelGrid  columns="4" title="#{event.title}" >

                                        <h:outputLabel value="Start at:" class="color_blue"></h:outputLabel>
                                        <h:outputLabel value="#{event.startDate}"  class="bold"  >
                                            <f:convertDateTime timeZone="GMT+7" type="date" pattern="MM/dd/yyyy" />
                                        </h:outputLabel>
                                        <h:outputLabel value="End at:" class="color_blue" ></h:outputLabel>
                                        <h:outputLabel value="#{event.endDate}" >
                                            <f:convertDateTime timeZone="GMT+7" pattern="MM/dd/yyyy"  />
                                        </h:outputLabel>
                                        <h:outputLabel value="Register at:" class="color_blue_red"></h:outputLabel>
                                        <h:outputLabel value="#{event.startRegDate}"  class="bold"  >
                                            <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                        </h:outputLabel>
                                        <h:outputLabel value="Due to:" class="color_blue_red"></h:outputLabel>
                                        <h:outputLabel value="#{event.endRegDate}"  class="bold"  >
                                            <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                        </h:outputLabel>
                                    </h:panelGrid>
                                    <h:panelGrid columns="1" style="width: 100%;">
                                        <h:outputLabel value="#{eventControl.mediumEventDescription(event)}"  ></h:outputLabel>

                                        <p:commandLink   actionListener="#{eventControl.redirectToEvent(eventControl.selectedevent)}"  value="Details" style=" font-weight: bold; text-decoration: none; float: right;padding-right: 0px; color:#b1f100 ; background-color:#2e16b1" >
                                            <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                        </p:commandLink>

                                    </h:panelGrid>
                                </h:panelGrid>
                            </h:panelGrid>  
                        </p:column>
                    </p:dataGrid>
                </h:form>
            </p:tab>

        </p:accordionPanel>

    </f:view>
</ui:composition>